<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>iReader阅读器</title>
		<style type="text/css">
			#main {
				width: 100%;
				height: 100px;
			}
			
			#mainleft {
				width: 30%;
				height: 80%;
				float: left;
				margin-top: 40px;
			}
			
			.nav {
				margin: 0px;
				padding: 0px;
			}
			
			.right {
				width: 120px;
				height: 100%;
				text-align: center;
				float: left;
				list-style-type: none;
				margin-top: 75px;
				margin-left: 10px;
			}
			
			a:link,
			a:visited {
				text-decoration: none;
				/*超链接无下划线*/
			}
			
			.orangetwo {
				width: 1333;
				height: 650px;
				margin-left: 100px;
				margin-right: 100px;
				margin-top: auto;
				margin-bottom: auto;
				background-color: #f1f1f1;
				padding-top: 60px;
				padding-bottom: 100px;
				padding-left: 30px;
				padding-right: 150px;
			}
			.two1{
				border-bottom:  solid 1px gray;
				padding-bottom: 30px;
			}
			.two2{
				border-bottom:  solid 1px gray;
				padding-bottom: 30px;
			}
			.two3{
				border-bottom:  solid 1px gray;
				padding-bottom: 30px;
			}
			.first {
				width: 300px;
				margin-left: 150px;
			}
			
			.btm {
				width: 300px;
				height: 120px;
				border-style: ridge;
				padding-top: 10px;
				margin-top: 50px;
				margin-left: 150px;
			}
			
			.second {
				margin-left: 150px;
				margin-top: 80px;
			}
			
			.btnh {
				margin-left: 150px;
				margin-top: 40px;
			}
			
			.third {
				margin-left: 150px;
				margin-top: 50px;
			}
			
			.btjk {
				margin-left: 150px;
				margin-top: 50px;
			}
			
			.btjk font {
				position: absolute;
				left: 1000px;
				top: 700px;
			}
			
			.two4 {
				margin-left: 750px;
				margin-top: 50px;
			}
			.div5 a {
				color: #999;
				font-weight: bold;
				/*font-weight用来定义字体的粗细，默认为normal*/
				padding-right: 20px;
				padding-bottom: 5px;
				text-decoration: none;
				font-size: small;
			}
			
			.div6 span a {
				color: #999;
				font-weight: normal;
				padding-right: 10px;
				text-decoration: none;
				font-size: small;
			}
			
			.div7 {
				text-align: center;
				font-size: small;
			}
			.topfour ul {
				width: 1000px;
				font-size: calc(15px);
				padding: 0 50px 40px;
				margin: 0 auto;
				color: #999;
				position: relative;
				overflow: hidden;
			}
			
			.topfour ul li {
				width: 200px;
				line-height: 25px;
				float: left;
				overflow: hidden;
			}
			
			.topfour ul li h1 {
				font-size: 25px;
				padding-bottom: 5px;
			}
			
			.topfour ul li h2 {
				font-size: 28px;
				padding: 5px 0px 10px;
			}
			
			.topfour ul li a {
				color: #999;
				font-size: 15px;
				display: block;
				text-decoration: none;
			}
		</style>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<!--引入jquery-->
<script type="text/javascript"
	src="static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
	// 使用jquery进行ajax处理
	function doAjaxQuery() {
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "AddressAction", // 请求的url
			data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				 // 解析拼写的html内容
				 var strHtml = "";
				$.each(data, function(index, eachVal) {
					strHtml+="<tr>";
					
					strHtml+="<th scope='row'>";
					strHtml+=(index+1);
					strHtml+="</th>";
					
					strHtml+="<td>";
					strHtml+=eachVal.addname;
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+=eachVal.addtel;
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+=eachVal.address;
					strHtml+="</td>";
					
					strHtml+="</tr>";
				});
				
				// 把解析的html内容，使用dom操作赋值到表格中
				$("#displaytbody").html(strHtml);
			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}
</script>
	</head>

	<body>
		<div id="main">
			<div id="mainleft">
				<img src="img/}KR79AYSKZJ1({0WVD50603.png" / hspace="30px">

			</div>
			<div class="mainright">
				<ul class="nav">
					<li class="right">
						<a style="color:#CEC6C6" href="#">首页</a>
					</li>
					<li class="right">
						<a style="color:#CEC6C6" href="#">iReader阅读器</a>
					</li>
					<li class="right">
						<a style="color:#CEC6C6" href="#">产品中心</a>
					</li>
					<li class="right">
						<a style="color:#CEC6C6" href="#">商务合作</a>
					</li>
					<li class="right">
						<a style="color:#CEC6C6" href="#">关于我们</a>
					</li>
					<li class="right">
						<a style="color:#CEC6C6" href="#">掌阅招聘</a>
					</li>
					<li class="right">
						<a style="color:#CEC6C6" href="index_07.html">登录</a>
					</li>
			</div>
		</div>
		<div class="orangetwo">
			<div class="two1">
				<div class="first">
					<font>收货地址</font>
				</div>
				<div id="form1" >
				<div>
				<input type="text" onclick="doAjaxQuery()" >
				</div id="displaytbody">
                  <a href="index_14.html">添加收货地址</a>
				</div>
			</div>
			<div class="two2">
				<div class="second">
					<font>发票信息</font>
				</div>
				<div class="btnh">
					<font>发票抬头</font>
					<input type="radio" name="color" id="color0" />不需要发票
					<input type="radio" name="color" id="color1" />个人
					<input type="radio" name="color" id="color2" />单位
				</div>
			</div>
			<div class="two3">
				<div class="third">
					<font>商品信息</font>
				</div>
				<div class="btjk">
					<img src="img/CmRaIVuDr0SEMfxOAAAAAALMGBU603580370.png" width="50px" height="50px" /> 【首发】iReader Smart 10.3英寸超级智能本黑色
					<font>X1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;¥3369</font>

				</div>
			</div>
			<div class="two4">
				<font>应付金额：¥3369</font>
				<input type="submit" name="提交订单" id="提交订单" value="提交订单" onclick="location.href='index_11.html'"/>
			</div>
		</div>
		<div class="topfour">
			<ul>
				<li>
					<h1>售后服务</h1>
					<a href="#1">售后服务政策</a><br />
					<a href="#2">退换货办理</a><br />
					<a href="#3">维修流程</a><br />
				</li>
				<li>
					<h1>支付与配送</h1>
					<a href="#4">支付方式</a><br />
					<a href="#5">配送方式</a><br />
				</li>
				<li>
					<h1>关于掌阅</h1>
					<a href="#6">了解掌阅</a><br />
					<a href="#7">加入掌阅</a><br />
				</li>
				<li>
					<h1>关注掌阅</h1>
					<a href="#6">掌阅微博</a><br />
					<a href="#7">掌阅书城</a><br />
				</li>
				<li style="width: 200px;">
					<h1>客服热线</h1><br />
					<h2>400 895 9626</h2><br /> 周一至周日 9:00-18:00
				</li>
			</ul>
		</div>
		<div class="topfive">
			<div class="div5">
				<a href="/terms" title="法律声明">法律声明</a>
				<a href="/copyright" title="版权声明">版权声明</a>
				<a href="/privacy" title="隐私策略">隐私策略</a>
				<a href="/aboutour/contact-us" title="联系我们">联系我们</a>
			</div>
			<div class="div6">
				<span>
					<a href="http://www.ireader.com/static/images/papers/publishing_license_2018.jpg" target="_blank">出版物经营许可证</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="http://www.ireader.com/static/images/papers/icp.jpg" target="_blank">京ICP证090653号</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="/aboutour/publish" target="_blank">网络出版服务许可证 （总）网出证（京）字第 141 号</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="http://www.ireader.com/static/images/papers/document.jpg" target="_blank">网文证</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a id="font1">京ICP备11008516号</a>
				</span>
			</div>
			<div class="div7">
				<font id="font2">2018 All Rights Reserved 掌阅科技股份有限公司 版权所有</font>
			</div>
		</div>
	</body>

</html>